<?xml version="1.0"  encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:body>
        <ui:composition template="./template.xhtml">
            <ui:define name="navigation">
                <ul>
                    <li><h:link outcome="index" value="#{msg.backtologin}"/></li>
                </ul>
            </ui:define>
            <ui:define name="content">
                <div id="main">
                    <h2>#{msg.register}</h2>
                    <p>#{msg.fillin}</p>
                    <h:form>
                        <h3>#{msg.logindatahead}</h3>
                        <div class="formblock">
                            <fieldset>
                                <h:panelGrid id="lgrid" columns="3">
                                    <h:outputLabel styleClass="Float" for="username" value="#{msg.username}"/>
                                    <h:inputText label="username" id="username" value="#{rc.newPlayer.username}" required="true" requiredMessage="#{msg.requiredusername}">
                                        <f:validateRegex pattern="[A-Za-z][A-Za-z]*"/>
                                    </h:inputText>
                                    <h:messages layout="table" styleClass="error" errorStyle="color: red" for="username" showDetail="false" showSummary="true"/>

                                    <h:outputLabel styleClass="Float" for="password" value="#{msg.password}"/>
                                    <h:inputSecret label="password" id="password" value="#{rc.newPlayer.password}" required="true" requiredMessage="#{msg.requiredpassword}">
                                        <f:validateLength minimum="3"/>
                                        <f:validateRegex pattern="[A-Za-z0-9]*([A-Za-z][0-9]|[0-9][A-Za-z])[A-Za-z0-9]*"/>
                                    </h:inputSecret>
                                    <h:messages layout="table" styleClass="error" errorStyle="color: red" for="password" showDetail="false" showSummary="true"/>
                                    <h:outputLabel styleClass="Float" for="avatar" value="#{msg.avatar}"/>
                                    <h:selectOneMenu id="avatar" value="#{rc.newPlayer.avatarURL}">
                                        <f:selectItems value="#{picasa.photoURLs}" var="avatarList" itemLabel="#{avatarList.description}" itemValue="#{avatarList.url}"/>
                                    </h:selectOneMenu>
                                    
                                </h:panelGrid> 
                            </fieldset>
                        </div>

                        <h:selectBooleanCheckbox id="showpersonaldata" immediate="true" value="#{rc.displayPrivateData}" 
                                                 valueChangeListener="#{rc.displayChanged}" onclick="this.form.submit()" >

                        </h:selectBooleanCheckbox>
                        <h:outputLabel styleClass="Float" for="showpersonaldata" value="#{msg.showpersonal}"/>

                        <h:panelGroup rendered="#{rc.displayPrivateData}">
                            <h3>#{msg.persdatahead}</h3>
                            <div class="formblock">
                                <fieldset>            
                                    <h:panelGrid id="pgrid" columns="3">
                                        <h:outputLabel styleClass="Float" for="firstname" value="#{msg.firstname}" rendered="#{rc.displayPrivateData}"/>
                                        <h:inputText id="firstname" value="#{rc.newPlayer.firstname}" required="true" rendered="#{rc.displayPrivateData}" requiredMessage="#{msg.requiredfirstname}">
                                            <f:validateRegex pattern="[A-Za-z][A-Za-z]*"/>
                                        </h:inputText>
                                        <h:messages layout="table" styleClass="error" errorStyle="color: red" for="firstname" showDetail="false" showSummary="true"/>

                                        <h:outputLabel styleClass="Float" for="lastname" value="#{msg.lastname}" rendered="#{rc.displayPrivateData}"/>
                                        <h:inputText id="lastname" value="#{rc.newPlayer.lastname}" required="true" rendered="#{rc.displayPrivateData}" requiredMessage="#{msg.requiredlastname}">
                                            <f:validateRegex pattern="[A-Za-z][A-Za-z]*"/>
                                        </h:inputText>
                                        <h:messages layout="table" styleClass="error" errorStyle="color: red" for="lastname" showDetail="true" showSummary="false"/>

                                        <h:outputLabel styleClass="Float" for="dateofbirth" value="#{msg.birthdate}" rendered="#{rc.displayPrivateData}"/>
                                        <h:inputText id="dateofbirth" value="#{rc.newPlayer.birthday}" validator="#{rc.validateBirthday}" required="true" rendered="#{rc.displayPrivateData}" requiredMessage="#{msg.requiredbirthdate}">
                                            
                                        </h:inputText>
                                        <h:messages layout="table" styleClass="error" errorStyle="color: red" for="dateofbirth" showDetail="true" showSummary="false"/>

                                        <h:outputLabel styleClass="Float" for="sex" value="#{msg.sex}" rendered="#{rc.displayPrivateData}"/>
                                        <h:selectOneMenu id="sex" value="#{rc.newPlayer.sex}" rendered="#{rc.displayPrivateData}" >
                                            <f:selectItem itemValue="w" itemLabel="#{msg.female}"/>
                                            <f:selectItem itemValue="m" itemLabel="#{msg.male}"/>
                                        </h:selectOneMenu>
                                    </h:panelGrid>
                                </fieldset>
                            </div>
                        </h:panelGroup>
                        <div id="buttons">
                            <h:commandButton value="#{msg.regbutton}" accesskey="r" action="#{rc.register}" rendered="#{!rc.registrationSuccessful}">

                            </h:commandButton>    
                        </div>
                        <h:panelGroup rendered="#{rc.registrationSuccessful}">
                            <h:outputText value="#{msg.successgoto} "/>
                            <h:link value="#{msg.login}" accesskey="l" outcome="index"/>
                        </h:panelGroup>

                    </h:form>
                </div>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
